<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <!-- <router-view/> -->
    <n-header></n-header>

      <transition name="fade">

      <router-view>
        <!-- 这里是不被缓存的视图组件，比如 Edit！ -->
      </router-view>

       </transition>

    
    <n-footer></n-footer>
    <!-- <bootstrap-vue></bootstrap-vue> -->
    <vue-alert-loading loadingMaskBg="#e9ecef" originBg="#2d6df0" :visible="ifLoading"/>
  </div>
</template>

<script>
import NHeader from './components/common/header'
import NFooter from './components/common/footer'


import BootstrapVue from "./components/bootstrap_vue";
import { mapState } from "vuex";


export default {
  name: "app",
  components:{NHeader,NFooter,BootstrapVue},
  computed:{
    ...mapState(['ifLoading'])
  }
};
</script>

<style lang="scss">
@import "./assets/style/reset.css";

// 富文本编辑器表情包
.w-e-text-container .w-e-panel-container .w-e-emoticon-container .w-e-item{
  padding: 3px !important;
}

.swal-overlay{
  z-index: 1000000;
}

#app {
  font-family:"Microsoft YaHei", "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: rgb(247, 250, 252);
  /* text-align: center; */
  /* color: #2c3e50; */
  /* margin-top: 60px; */
  position: relative;
}
.fade-enter-active, .fade-leave-active {
    transition: opacity 0.3s;
}
.fade-enter, .fade-leave-active {
    opacity: 0.5;
}

.swal-button{
    // background-color: #2d6df0 !important;
    background-image: linear-gradient(0deg, 
		#2d6df0 0%, 
		#27e7dd 100%), 
	linear-gradient(
		#37dfdd, 
		#37dfdd) !important;
}
.btn-success{
  // background-color: #2d6df0 !important;
   background-image: linear-gradient(0deg, 
		#2d6df0 0%, 
		#27e7dd 100%), 
	linear-gradient(
		#37dfdd, 
		#37dfdd) !important;
  border-color:  transparent !important;
  border:  none !important;
}
.custom-control-input:checked~.custom-control-indicator{
  background-color: #2d6df0;
}

// .btn.active.focus, .btn.active:focus,.btn.focus, .btn:active.focus,.btn:active:focus, .btn:focus {
// 　　outline:0;
// }
/*去除选择框的outline*/
// .bootstrap-select .dropdown-toggle:focus{outline:none !important;}
/*去除选项的outline*/
a:focus {outline:none !important;}
.swal-button:focus{
  box-shadow: none !important;
}
.swal-button--cancel{
  color: #ffffff !important;
}
.page-item.active .page-link{
    background-color: #2d6df0 ;
    border-color: #2d6df0;
    color: #ffffff
}
.page-link{
  color: #2d6df0;
}
.page-link:focus, .page-link:hover{
  color: #2d6df0;
}
.btn-primary.focus, .btn-primary:focus{
  box-shadow: none;
}
.btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle{
  border-color: #2d6df0;
  background-color: #2d6df0;
  box-shadow: none;
}

/* 改变浏览器滚动条样式 */
::-webkit-scrollbar {
    height: 5px;
    width: 5px;
    background: rgba(0,0,0,.1)
}

::-webkit-scrollbar:hover {
    background: rgba(0,0,0,.1)
}

::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,.1);
    border-radius: 6px
}

::-webkit-scrollbar-thumb:hover {
    box-shadow: inset 1px 1px 1px rgba(0,0,0,.15);
    background-color: rgba(0,0,0,.2)
}
input,button{outline:none} 


@import "./alert.css";

</style>
